<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import {checkUserToken, onlineTicket} from "./utils/api";
import { getRandom } from "./utils/fileUtils";
const fs = require("fs");
export default {
  name: "panda",
  data() {
    return {
      remotePort: "",
      userInfo: "",
    };
  },
  methods: {
    getRemotePort() {
      let min = 5000,
        max = 15000;
      this.remotePort = getRandom(min, max);
      this.$localStore.set("remotePort", this.remotePort);
      this.$localStore.set("isStart", false);
      console.log("生成了随机端口=", this.remotePort);
    },
    checkAccessToken() {
      if (this.$localStore.get("access_token") != null) {
        this.loading = true;
        checkUserToken()
          .then((res) => {
            this.loading = false;
            if (res.data.ret == 1) {
              this.$localStore.set("apiurl_list", res.data.data.apiurl_list);
              this.$router.push({
                path: "/home",
              });
            } else {
              this.$message.error("登录已失效，请重新登录！");
              this.$router.push({
                path: "/login",
              });
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.$router.push({
          path: "/login",
        });
      }
    },
    // 获取在线连接
    getIframeUrl(){
      this.loading = true
      onlineTicket().then(res => {
        if(res.data && res.data.ret == 1){
          this.$localStore.set("onlineUrl", res.data.data.online);
        }else{
          this.$message.error(res.data.msg)
        }
      }).catch(()=>{
        this.loading = false
      })
    },
  },
  mounted() {
    this.getRemotePort();
    this.$nextTick(function () {
      setTimeout(() => {
        this.checkAccessToken();
      }, 1100);
    });
    this.getIframeUrl()
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#app {
  width: 100vw;
  height: 100vh;
}
body {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #b7b7b7;
  font-size: 16px;
  background: #2b2e38;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.chooseColor {
  color: #09d0ce !important;
}
.cursor {
  cursor: pointer;
}
/* 登陆、注册页面样式 */
.form-item {
  width: 100%;
  height: 46px;
  background: #2b2e38;
  border: 1px solid #4a4e59;
  border-radius: 8px;
  padding: 0 18px;
  margin-bottom: 17px;
}
.form-item > img {
  width: 18px;
  height: 18px;
}
.form-item > input {
  flex: 1;
  margin: 0 12px;
  background: #2b2e38;
  outline: none;
  border: 0;
  color: #fff;
}
.login-btn {
  width: 100%;
  height: 46px;
  background: #09d0ce;
  border-radius: 8px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
}
.jump-btns {
  width: 100%;
  justify-content: space-between !important;
  margin-bottom: 38px;
}
.jump-btns > div {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #09d0ce;
}
/* 修改弹窗样式 */
.el-dialog--center {
  background: #303440;
  border-radius: 20px;
  margin-top: 5vh !important;
}
.el-dialog__header {
  display: none;
}
.el-dialog--center .el-dialog__body {
  padding: 10px 20px;
}
/* 隐藏滚动条 */
/* ::-webkit-scrollbar {
  display: none;
} */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #2b2e38;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #2b2e38;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #09d0ce;
}

/* 表格样式 */
.buy-table {
  width: 100%;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #b7b7b7;
  margin: 30px 0;
}
.buy-header,
.buy-body {
  width: 100%;
  height: 40px;
}
.buy-header {
  background: #24262f;
}
.header-item,
.body-item {
  flex: 1;
  height: 100%;
  border: 1px solid #4a4e59;
  border-bottom: 0;
}
.no-data {
  width: 100%;
  height: 40px;
  border: 1px solid #4a4e59;
}
</style>
